<template>
	<div class='header-swiper'>
		<swiper :options="swiperOption">
			<swiper-slide
					v-for='item in swiperList'
					:key='item.id'>
				<img :src="item.imgUrl">
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>
<script type="text/javascript">
    export default {
        props:['swiperList'],
        data () {
            return {
                swiperOption:{
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    loop:true
                }
            }
        }
    }
</script>
<style type="text/css" scoped>
	.header-swiper{
		background: #ccc;
		height: 0;
		padding-bottom:26.67%;

	}
	.header-swiper img{
		width:100%;
		height: 100%;
	}
	.header-swiper >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
</style>